<template>
	<view class="content">
		<view class="padding-top-80 display-flex center align-items">
			<image @click="chooseImage()" :src="userinfo.avatar" style="width: 160rpx;height: 160rpx;"
				class="border-radius" mode=""></image>
		</view>
		<view class="padding-about-30">
			<view class="view  margin-top-120">
				<view class="display-flex" style="padding: 20rpx 0;">
					<view class="font-size-26">
						昵称:
					</view>
					<input type="text" value="" v-model="userinfo.nickname" placeholder="请输入昵称"
						class="font-size-26 file-1 text-right" />
				</view>
				<view class="display-flex" style="padding: 20rpx 0;">
					<view class="font-size-26">
						电话:
					</view>
					<input type="text" disabled :value="userinfo.mobile" placeholder="请输入昵称"
						class="font-size-26 file-1 text-right" />
				</view>
			</view>
			<view class="display-flex margin-top-120 flex-direction-column center">
				<view @click="profile()" class="button text-center color-FFF font-size-26"
					style="padding: 25rpx 266rpx;width: 150rpx;">
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const userinfo = ref(local.get('userinfo'))
	onLoad(function(option) {});
	onShow(function() {});
	async function profile() {
		const {
			code,
			data
		} = await api.profile({
			nickname :userinfo.value.nickname,
			avatar :userinfo.value.avatar,
			mobile :userinfo.value.mobile
		})
		if(code == 1){
			getuserinfo()
		}
	}
	async function getuserinfo() {
		const {
			code,
			data
		} = await api.getuserinfo()
		if (code == 1) {
			local.set('userinfo', data)
			userinfo.value = data
		}
	}
	/**
	 * 修改头像
	 */
	async function chooseImage() {
		const {
			errMsg,
			tempFilePaths,
			tempFiles
		} = await uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		})
		console.log(tempFilePaths);
		if (errMsg == 'chooseImage:ok') {
			for (var i = 0; i < tempFilePaths.length; i++) {
				uploadFilePromise(tempFilePaths[i])
			}

		}
	}
	/**
	 * @param {Object} url上传  路径
	 * 上传头像
	 */
	async function uploadFilePromise(url) {
		const {
			code,
			data
		} = await api.uploadFilePromise(url)
		if (code == 1) {
			userinfo.value.avatar = data.fullurl
			// userinfo.value.avatar = id
			// userinfo.value.avatar_url = path
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.view {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
	}
</style>